<template>
    <el-container class="layout-container">
        <el-header style="text-align: right; font-size: 12px" fixed>
            <div class="toolbar">
                <el-dropdown>
                    <el-icon style="margin-right: 8px; margin-top: 1px">
                        <setting />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>View</el-dropdown-item>
                            <el-dropdown-item>Add</el-dropdown-item>
                            <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <span>{{ user.nickName }}</span>
            </div>
        </el-header>

        <el-container>
            <el-aside width="200px">
                <el-scrollbar>
                    <el-menu 
                    active-text-color="#ffd04b"
                    background-color="#545c64"
                    :default-active="activeMenu"
                    text-color="#fff"
                    @select="selectMenu">
                        <!-- <menu-item :menu="menu" v-for="menu in menus" :key="menu.id"></menu-item> -->
                         <template v-for="menu in menus" :key="menu.id">
                            <el-sub-menu :index="menu.routePath">
                                <template #title>
                                    <el-icon><component :is="menu.icon" /></el-icon>
                                    {{menu.name}}
                                </template>
                                <template v-for="child in menu.children" :key="child.id">
                                    <el-sub-menu v-if="child.children && child.children.length>0" :index="menu.routePath">
                                        <template #title>
                                            <el-icon><component :is="menu.icon" /></el-icon>
                                            {{menu.name}}
                                        </template>
                                        <el-menu-item :index="child.routePath">
                                            <el-icon><component :is="child.icon" /></el-icon>
                                            <span>{{ child.name }}</span>
                                        </el-menu-item>
                                    </el-sub-menu>
                                    <el-menu-item v-else :index="child.routePath">
                                        <el-icon><component :is="child.icon" /></el-icon>
                                        <span>{{ child.name }}</span>
                                    </el-menu-item>
                                </template>
                            </el-sub-menu>
                        </template>
                        
                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

</template>

<script setup>
import router from '@/router';
import { usePermissionStore, useUserStore } from '@/store';
import { onMounted, ref } from 'vue';

let {user, logout} = useUserStore();
let {menus, generateRoutes} = usePermissionStore();

let activeMenu = ref(1);
 
onMounted(async () => {
    console.log("user", user)
    console.log("asyMenus", menus)
    generateRoutes();
})

let selectMenu = (index) => {
    console.log("select-menu", index)
    activeMenu = index
    router.push({path: index})
}

</script>

<style scoped>
.layout-container {
    position: relative;
    background-color: white;
    height: 100vh;
    width: 100vw;
    padding: 0;
}

.layout-container .el-header {
    position: relative;
    background-color: #eee;
}

.layout-container .el-aside {
    color: black;
    background: #eee;
}

.layout-container .el-menu {
    border-right: none;
}

.layout-container .el-main {
    padding: 0;
}

.layout-container .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>
